<div class="layui-fluid">
    <form class="layui-form layui-col-md12">
        <div class="layui-form-item layui-col-md11">
            <div class="layui-input-inline">
                <input name="searchName" autocomplete="off" class="layui-input" placeholder="请输入员工名称"/>
            </div>
            <div class="layui-input-inline">
                <a class="layui-btn" lay-submit lay-filter="search">查询</a>
            </div>
        </div>
        <a class="layui-btn layui-col-md1" lay-submit lay-filter="showAdd">新增</a>
    </form>

    <table class="layui-table pageTable" lay-filter="table"></table>
</div>

<script type="text/html" id="operations">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use(['table', 'form', 'jquery'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;
        var baseUrl = 'http://localhost';
        console.log('<input name="status" lay-skin="switch" lay-text="开启|关闭" type="checkbox"' + (1 == 1) ? 1 : 0 + '/>');

        var render = table.render({
            elem: '.pageTable'
            , url: 'http://localhost/users'
            , cols: [[//加载的表格
                {field: 'username', title: '员工名称', width: "20%"},
                {field: 'title', title: '权限组', width: "20%"},
                {
                    field: 'status', title: '状态', width: "20%", templet: function (d) {
                        if (d.status == 1) {
                            return '<input name="status" lay-skin="switch" lay-text="开启|关闭" type="checkbox" checked  lay-filter="status"/>';
                        } else {
                            return '<input name="status" lay-skin="switch" lay-text="开启|关闭" type="checkbox" lay-filter="status" />'
                        }
                    }
                },
                {field: 'phone', title: '手机号', width: "20%"},
                {field: 'operations', title: '操作', toolbar: '#operations', width: "20%"}
            ]]
            , page: true
            , response: {
                statusName: 'status',
                statusCode: 200,
                dataName: 'data'
            }
        });

        form.on('submit(search)', function (obj) {
            var searchName = obj.field.searchName;
            render.reload({
                where: {
                    searchName: searchName
                }
            });
        })

        form.on('switch(status)', function(obj) {
            var status = 0;
            if (obj.elem.checked) {
                status = 1;
            }
            $.ajax({
                url:
            })
        })

        var loading;
        table.on('tool(table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent == 'detail') {
                $.ajax({
                    url: baseUrl + '/users/' + data.id,
                    type: 'get',
                    beforeSend: function () {
                        loading = layer.load(1, {shade: 0.3});
                    },
                    success: function (res) {
                        console.log(res);
                        layer.close(loading);
                        //设置弹出层的值
                        $('#showUserName').text(res.data.username);
                        $('#showTitle').text(res.data.title);
                        $('#showStatus').text(res.data.status == 1 ? '开启' : '关闭');
                        $('#showPhone').text(res.data.phone);
                        $('#showIntro').text(res.data.intro);
                        layer.open({
                            type: 1,
                            shade: 0,
                            offset: '100px',
                            title: '查看',
                            content: $('#detail'),
                            area: ['300px', 'auto']
                        })
                    },
                    error: function (res) {
                        console.log(res);
                        layer.close(loading);
                    }
                })
            }
        })
    });
</script>

<!-- 展示 -->
<div id="detail" style="display:none">
    <div class="layui-form-item">
        <label class="layui-form-label">员工名称:</label>
        <div class="layui-inline">
            <span class="layui-form-label left" id="showUserName"></span>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限组:</label>
        <div class="layui-inline">
            <span class="layui-form-label left" id="showTitle"></span>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态:</label>
        <div class="layui-inline">
            <span class="layui-form-label left" id="showStatus"></span>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号:</label>
        <div class="layui-inline">
            <span class="layui-form-label left" id="showPhone"></span>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注:</label>
        <div class="layui-inline">
            <span class="layui-form-label left" id="showIntro"></span>
        </div>
    </div>
</div>

<style>
    .left{
        text-align: left;
    }
</style>